<template>
    <view class="search-date-bar">
        <!-- 搜索框 -->
        <uni-search-bar v-model="keyword" placeholder="请输入关键词" bgColor="#FFFFFF" radius="10" cancelButton="none"
            @confirm="onSearch" @clear="onSearch" style="width: calc(100% - 200rpx);"/>

        <!-- 时间选择器 -->
        <picker v-if="props.showDate" mode="date" :value="date" :end="today" fields="day" @change="onDateChange">
            <view class="date-btn">
                <text class="date-txt">{{ dateText }}</text>
                <uni-icons type="calendar-filled" size="14" color="#fff" />
            </view>
        </picker>
    </view>
</template>

<script setup>
import { ref, computed } from 'vue'

const emit = defineEmits(['search', 'dateChange'])

const props = defineProps({
    showDate: {
        type: Boolean,
        default: true
    }
})

const keyword = ref('')
const date = ref('')

// 默认今天
// date.value = new Date().toISOString().slice(0, 10)
const today = date.value

const dateText = computed(() => {
    return date.value === today ? '今天' : date.value
})

// 搜索
const onSearch = () => {
    emit('search', keyword.value)
}
// 日期变化
const onDateChange = (e) => {
    console.log('日期变化:', e)
    date.value = e.detail.value
    emit('dateChange', date.value)
}
</script>

<style lang="scss" scoped>
.search-date-bar {
    display: flex;
    align-items: center;
    padding: 0 30rpx;
    margin-bottom: 20rpx;
    background: #fff;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    gap: 20rpx;

    /* 搜索框占剩余宽度 */
    ::v-deep .uni-search-bar {
        flex: 1;
        margin: 0 !important;
    }

    /* 日期按钮 */
    .date-btn {
        display: flex;
        align-items: center;
        padding: 0 20rpx;
        height: 64rpx;
        border: 2rpx solid #dcdcdc;
        border-radius: 10rpx;
        background: #667eea;
        white-space: nowrap;
        min-width: 120rpx;
        justify-content: center;

        .date-txt {
            font-size: 20rpx;
            color: #fff;
            margin-right: 8rpx;
            //不转行
            white-space: nowrap;
        }
    }
}
</style>